<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var xmlhttp; // AJAX 对象
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttp = new XMLHttpRequest();
                    // 配置流，现行版本可以不配
                    if (xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/html")
                    }
                } catch (e) {
                    alert("你的浏览器不支持AJAX!!!");
                }
            }
        }

        function hello() {
            var url = "../HelloServlet?name=" + nm.value;
            // 回调函数
            xmlhttp.onreadystatechange =function () {
                console.info("xmlhttp.readyState = " + xmlhttp.readyState);
                console.info("xmlhttp.status = " + xmlhttp.status);

                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    res.innerText = xmlhttp.responseText;
                }
            }
            // 打开连接
            xmlhttp.open("get",url,true); // 默认异步，false是同步
            // 发出请求
            xmlhttp.send(null); // post时会有点不同，注意
        }
        // 404错误，一般是地址写错了，比如/Hello     Servlet
        // 405错误，一般是方法错误，比如get和post搞错了
        // 500错误，服务器内部错误，比如 1/0
    </script>
</head>
<body>
<!--  http://127.0.0.1/工程名/ajax/demo.html  当前目录-->

<!--  http://127.0.0.1/工程名/HelloServlet  要访问的目录-->
<h1>表单提交</h1>
<form action="../HelloServlet">
    名字：<input name="name">
    <button>Hello</button>
</form>

<h1>AJAX提交</h1>
<form>
    名字：<input name="name" id="nm" value="">
    <!-- button 普通按钮, submit 提交按钮， reset 重置按钮-->
    <button type="button" onclick="hello()">Hello</button>
</form>

<span id="res"> </span>

</body>
</html>